<template>
  <div class="box">
    <div class="header">
        <van-nav-bar
            title="确认订单"
            left-arrow
            @click-left="onClickLeft" />
    </div>
    <div class="content">
        <van-contact-card
            type="edit"
            :name="currentContact.name"
            :tel="currentContact.tel"
            @click="goAddressList"
            />
        <van-card
            v-for="item of orderList"
            :key="item.proid"
            :num="item.num"
            :price="item.originprice"
            :title="item.proname"
            :thumb="item.img1" />
        <!-- 优惠券单元格 -->
        <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="showList = true" />
        <!-- 优惠券列表 -->
        <van-popup
            v-model="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px;" >
            <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                @change="onChange"
                @exchange="onExchange" />
        </van-popup>
        <van-submit-bar :price="totalPrice" button-text="去支付" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast, ContactCard, Card, CouponCell, CouponList, Popup, SubmitBar } from 'vant'
import { getOrderList } from '@/api/order.js'

Vue.use(NavBar)
Vue.use(ContactCard)
Vue.use(Card)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(SubmitBar)

const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '孙霖专用劵',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}

export default {
  data () {
    return {
      orderList: [],
      userid: localStorage.getItem('userid'),
      currentContact: { name: '赵晓鹏  18669373683', tel: '北京市昌平区北京科技职业学院' },
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon]
    }
  },
  computed: {
    time () {
      return location.href.split('order/')[1]
    },
    totalPrice () { // 总价
      if (!this.orderList) return 0
      return 100 * this.orderList.reduce((sum, item) => {
        return sum + item.num * item.originprice
      }, 0) - (this.chosenCoupon === 0 ? this.coupons[0].value : 0)
    }
  },
  async mounted () {
    var res = await getOrderList({ userid: this.userid, time: this.time })
    this.orderList = res.data
    if (res.address) {
      this.currentContact.name = res.address.name + '  ' + res.address.tel
      this.currentContact.tel = res.address.province + res.address.city + res.address.addressDetail
      // this.currentContact.address = res.address.province + res.address.city + res.address.addressDetail
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    goAddressList () { // 地址列表入口
      Toast('编辑')
      this.$router.push({ name: 'addresslist', params: { time: this.time } })
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      console.log(this.coupons)
      this.coupons.push(coupon)
    },
    onSubmit () {
      console.log(this.chosenCoupon, this.coupons, this.disabledCoupons)
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>
